<!--
 * @Descripttion: 
 * @version: 
 * @Author: Ansel
 * @Date: 2020-03-30 11:16:35
 * @LastEditors: Ansel
 * @LastEditTime: 2020-03-30 11:25:04
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ul li{
            background-color: aqua;
        }
        ul li{
            background-color: blue;
        }
        ul>li{
            background-color: red;
        }
        li{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li id="ul"></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul = document.getElementById("ul");
        var observer = new MutationObserver(function(){
            console.log("www");
        });
        observer.observe(ul,{
            childList:true
        })
        ul.innerHTML = "<li>随便加一项</li>";

        console.log("ww")
        setTimeout(function(){
            console.log("15")
        },1000)
    </script>
</body>
</html>